<!doctype html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Epilog Theme">
    <title>Bizlamp - Multipurpose eCommerce HTML Template</title>

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="assets/images/favicon.png">

    <!-- CSS Files -->
    <link rel="stylesheet" href="assets/css/aos.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/boxicons.min.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/mailform.css">
    <link rel="stylesheet" href="assets/css/style.css?v=1.0.1">
    <link rel="stylesheet" href="assets/css/responsive.css?v=1.0.1">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/layer/3.1.1/layer.js"></script>
</head>
<body>
    <!-- Header Area Start -->
    <header class="header-area">
        <div class="main-navbar">
            <div class="container">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <a class="navbar-brand" href="index.html">
                        <img src="assets/images/logo.png" alt="logo">
                    </a>
                    <ul class="cart-menu responsive">
                        <li>
                            <a id="dropdownCartButton" class="position-relative" data-toggle="dropdown" href="#"><span class="item-count">10</span> <i class="bx bx-cart-alt"></i> </a>
                            <div class="dropdown">
                                <div class="dropdown-menu cart-dropdown" aria-labelledby="dropdownCartButton">
                                    <p>2 item(s) in your cart - <span>$665.00</span></p>
                                    <div class="minicart-products">
                                        <div class="minicart-product-info d-flex">
                                            <figure>
                                                <a href="#"> <img class="img-border" src="assets/images/products/product_01.png" alt="Home Decoration"></a>
                                            </figure>
                                            <div class="product-meta">
                                                <h5 class="product-title">
                                                    <a href="#">Artisan Craft Design Product Handicraft</a>
                                                </h5>
                                                <span class="product-price">1 x $280.00</span>
                                            </div>
                                            <a class="delete-btn" href="#" title="Delete Product">
                                                <span class="item-delete"><i class="bx bx-trash"></i></span>
                                            </a>
                                        </div>
                                        <div class="minicart-product-info d-flex">
                                            <figure>
                                                <a href="#"> <img class="img-border" src="assets/images/products/product_02.png" alt="Home Decoration"></a>
                                            </figure>
                                            <div class="product-meta">
                                                <h5 class="product-title">
                                                    <a href="#">Duis sodales ligula et orci pretium tempus</a>
                                                </h5>
                                                <span class="product-price">1 x $280.00</span>
                                            </div>
                                            <a class="delete-btn" href="#" title="Delete Product">
                                                <span class="item-delete"><i class="bx bx-trash"></i></span>
                                            </a>
                                        </div>

                                        <div class="minicart-product-calculation">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <p><strong>Shipping:</strong> <span>$7.00</span></p>
                                                    <p><strong>Tax:</strong> <span>Free</span></p>
                                                    <p><strong>Total: </strong> <span>$665.00</span></p>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="dcart-action">
                                                        <a href="cart.html" class="btn btn-primary">View Cart</a>
                                                        <a href="checkout.html" class="btn btn-secondary">Checkout</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a id="dropdownUserButton" data-toggle="dropdown" href="#"><i class="bx bx-user-circle"></i> </a>
                            <div class="dropdown">
                                <div class="dropdown-menu user-dropdown" aria-labelledby="dropdownUserButton">

                                    <a class="dropdown-item" href="#"><i class="bx bx-user-circle"></i> My Account</a>
                                    <a class="dropdown-item" href="#"><i class="bx bx-heart"></i> My Wishlist</a>
                                    <a class="dropdown-item" href="#"><i class="bx bx-cart-alt"></i> Checkout</a>
                                    <a class="dropdown-item" href="#"><i class="bx bx-log-in"></i> Login Or Register</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <form class="searchbox">
                                <input type="search" placeholder="Search......" name="search" class="searchbox-input" required="">
                                <button class="searchbox-submit" type="submit"><i class="bx bx-search-alt"></i></button>
                            </form>
                            <a class="search-btn"><i class="bx bx-search-alt"></i></a>
                        </li>
                        <li>
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                                <i class='bx bx-menu'></i>
                                <i class='bx bx-x'></i>
                            </button>
                        </li>
                    </ul>

                    <div class="collapse navbar-collapse mean-menu" id="navbarCollapse">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item dropdown">
                                <a class="nav-link active" href="index.html">
                                    Home
                                </a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
                                    Shop <i class="bx bx-chevron-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="nav-item"><a href="shop.html" class="nav-link">Shop Grid</a></li>
                                    <li class="nav-item"><a href="product-details.html" class="nav-link">Products Details</a></li>
                                    <li class="nav-item"><a href="cart.html" class="nav-link">Cart</a></li>
                                    <li class="nav-item"><a href="checkout.html" class="nav-link">Checkout</a></li>
                                </ul>
                            </li>

                            <li class="nav-item dropdown megamenu">
                                <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
                                    Collection <i class="bx bx-chevron-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="nav-item">
                                        <div class="container">
                                            <div class="row">
                                                <div class="col-md-3 col-sm-6 col-xs-6 ">
                                                    <h6 class="submenu-title">Men</h6>
                                                    <ul class="megamenu-submenu">
                                                        <li><a href="#">Consectetur adipiscing elit</a></li>
                                                        <li><a href="#">Pellentesque facilisis</a></li>
                                                        <li><a href="#">Vivamus at sapien</a></li>
                                                        <li><a href="#">Elementum urna</a></li>
                                                        <li><a href="#">Sed et mauris</a></li>
                                                        <li><a href="#">Sed sit amet purus</a></li>
                                                        <li><a href="#">Tristique ac faucibus</a></li>
                                                    </ul>
                                                </div>

                                                <div class="col-md-3 col-sm-6 col-xs-6 ">
                                                    <h6 class="submenu-title">Women</h6>
                                                    <ul class="megamenu-submenu">
                                                        <li><a href="#">Consectetur adipiscing elit</a></li>
                                                        <li><a href="#">Pellentesque facilisis</a></li>
                                                        <li><a href="#">Vivamus at sapien</a></li>
                                                        <li><a href="#">Elementum urna</a></li>
                                                        <li><a href="#">Sed et mauris</a></li>
                                                        <li><a href="#">Sed sit amet purus</a></li>
                                                        <li><a href="#">Tristique ac faucibus</a></li>
                                                    </ul>
                                                </div>

                                                <div class="col-md-3 col-sm-6 col-xs-6 ">
                                                    <h6 class="submenu-title">Baby</h6>
                                                    <ul class="megamenu-submenu">
                                                        <li><a href="#">Consectetur adipiscing elit</a></li>
                                                        <li><a href="#">Pellentesque facilisis</a></li>
                                                        <li><a href="#">Vivamus at sapien</a></li>
                                                        <li><a href="#">Elementum urna</a></li>
                                                        <li><a href="#">Sed et mauris</a></li>
                                                        <li><a href="#">Sed sit amet purus</a></li>
                                                        <li><a href="#">Tristique ac faucibus</a></li>
                                                    </ul>
                                                </div>

                                                <div class="col-md-3 col-sm-6 col-xs-6 ">
                                                    <h6 class="submenu-title">Accessories</h6>

                                                    <ul class="megamenu-submenu">
                                                        <li><a href="#">Consectetur adipiscing elit</a></li>
                                                        <li><a href="#">Pellentesque facilisis</a></li>
                                                        <li><a href="#">Vivamus at sapien</a></li>
                                                        <li><a href="#">Elementum urna</a></li>
                                                        <li><a href="#">Sed et mauris</a></li>
                                                        <li><a href="#">Sed sit amet purus</a></li>
                                                        <li><a href="#">Tristique ac faucibus</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </li>

                            <li class="nav-item dropdown">
                                <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
                                    Pages <i class="bx bx-chevron-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="nav-item"><a href="about.html" class="nav-link">About Us</a></li>
                                    <li class="nav-item"><a href="signin.html" class="nav-link">Login</a></li>
                                    <li class="nav-item"><a href="signup.html" class="nav-link">Register</a></li>
                                    <li class="nav-item"><a href="error-404.html" class="nav-link">404 Error</a></li>

                                    <li class="nav-item"><a href="faqs.html" class="nav-link">FAQ's</a></li>
                                    <li class="nav-item"><a href="contact.html" class="nav-link">Contact Us</a></li>
                                </ul>

                            </li>

                            <li class="nav-item dropdown">
                                <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
                                    Blog <i class="bx bx-chevron-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="nav-item"><a href="blog.html" class="nav-link">Blog</a></li>
                                    <li class="nav-item"><a href="blog-grid.html" class="nav-link">Blog Grid</a></li>
                                    <li class="nav-item"><a href="blog-details.html" class="nav-link">Blog Details</a></li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a href="contact.html" class="nav-link">Contact</a>
                            </li>
                        </ul>
                        <ul class="cart-menu">
                            <li>
                                <a class="position-relative" data-toggle="dropdown" href="#"><span class="item-count">10</span><i class='bx bx-cart-alt' ></i></a>
                                <div class="dropdown">
                                    <div class="dropdown-menu cart-dropdown" aria-labelledby="dropdownCartButton">
                                        <p>2 item(s) in your cart - <span>$665.00</span></p>
                                        <div class="minicart-products">
                                            <div class="minicart-product-info d-flex">
                                                <figure>
                                                    <a href="#"> <img class="img-border" src="assets/images/products/product_01.png" alt="Home Decoration"></a>
                                                </figure>
                                                <div class="product-meta">
                                                    <h5 class="product-title">
                                                        <a href="#">Artisan Craft Design Product Handicraft</a>
                                                    </h5>
                                                    <span class="product-price">1 x $280.00</span>
                                                </div>
                                                <a class="delete-btn" href="#" title="Delete Product">
                                                    <span class="item-delete"><i class="bx bx-trash"></i></span>
                                                </a>
                                            </div>
                                            <div class="minicart-product-info d-flex">
                                                <figure>
                                                    <a href="#"> <img class="img-border" src="assets/images/products/product_02.png" alt="Home Decoration"></a>
                                                </figure>
                                                <div class="product-meta">
                                                    <h5 class="product-title">
                                                        <a href="#">Duis sodales ligula et orci pretium tempus</a>
                                                    </h5>
                                                    <span class="product-price">1 x $280.00</span>
                                                </div>
                                                <a class="delete-btn" href="#" title="Delete Product">
                                                    <span class="item-delete"><i class="bx bx-trash"></i></span>
                                                </a>
                                            </div>


                                            <div class="minicart-product-calculation">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <p><strong>Shipping:</strong> <span>$7.00</span></p>
                                                        <p><strong>Tax:</strong> <span>Free</span></p>
                                                        <p><strong>Total: </strong> <span>$665.00</span></p>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="dcart-action">
                                                            <a href="cart.html" class="btn btn-primary">View Cart</a>
                                                            <a href="checkout.html" class="btn btn-secondary">Checkout</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a data-toggle="dropdown" href="#"><i class='bx bx-user-circle' ></i></a>
                                <div class="dropdown">
                                    <div class="dropdown-menu user-dropdown" aria-labelledby="dropdownUserButton">

                                        <a class="dropdown-item" href="#"><i class='bx bx-user-circle' ></i> My Account</a>
                                        <a class="dropdown-item" href="#"><i class='bx bx-heart' ></i> My Wishlist</a>
                                        <a class="dropdown-item" href="#"><i class='bx bx-cart-alt' ></i> Checkout</a>
                                        <a class="dropdown-item" href="#"><i class='bx bx-log-in' ></i> Login Or Register</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <form class="searchbox">
                                    <input type="search" placeholder="Search......" name="search" class="searchbox-input" required>
                                    <button class="searchbox-submit" type="submit"><i class="bx bx-search-alt"></i></button>
                                </form>
                                <a class="search-btn"><i class='bx bx-search-alt' ></i></a>
                            </li>
                        </ul>
                    </div>
                </nav>

            </div>
        </div>
    </header>
    <!-- Header Area End -->

    <!-- Breadcrumbs Area Start -->
    <div class="breadcrumbs text-center">
        <div class="container">
            <h2 class="page-title">Product Details</h2>
            <ul class="breadcrumbs-link">
                <li><a href="index.html">Home <i class="bx bx-chevrons-right"></i></a></li>
                <li>Product Details</li>
            </ul>
        </div>
    </div>
    <!-- Breadcrumbs Area Start -->

    <!-- Product Details Area Start -->
    <div class="product-details">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="single-product-image text-center">
                        <div id="custCarousel" class="carousel slide" data-ride="carousel">
                            <div class="carousel-inner" id="product-images">
                                <!-- 商品图片将动态插入到这里 -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="single-product-details">
                        <div class="product-name"><h2 id="product-name"></h2></div>
                        <div class="price">
                            <div class="d-flex">
                                <div class="base-price" id="base-price"></div>
                                <div class="sale-price" id="sale-price"></div>
                            </div>
                        </div>
                        <div class="product-description-title"><h3>Product Description</h3></div>
                        <p class="product-short-description" id="product-description"></p>
                        <!-- 其他商品信息 -->
                        <!-- 添加购物车按钮 -->
                        <button class="addcart" id="add-to-cart-btn" type="button">加入购物车</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Product Details Area End -->

    <!-- Product Details Area Start -->

    <!-- Product Details Area Start -->


                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="single-product-details">
                        <div class="product-name"><h2></h2></div>
                        <div class="price">
                            <div class="d-flex">
                                <div class="base-price"></div>
                                <div class="sale-price"></div>
                            </div>
                        </div>
                        <div class="product-description-title"><h3>Product Description</h3></div>
                        <p class="product-short-description"></p>
                        <!-- 其他商品信息 -->
                    </div>
                </div>
            </div>
        </div>
    </div>




    <!--  Top to Bottom  -->
    <div class="top-bottom-scroll"><i class='bx bx-chevrons-up bx-fade-up' ></i></div>

    <!-- JS Script -->
    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/js/bootstrap.min.js"></script>
    <script src="./assets/js/popper.min.js"></script>
    <script src="./assets/js/aos.js"></script>
    <script src="./assets/js/mailform.js"></script>
    <script src="./assets/js/owl.carousel.min.js"></script>
    <script src="./assets/js/main.js?v=1.0.0"></script>


    <script>
        $(document).ready(function() {
            // 从 URL 中获取商品 ID
            const urlParams = new URLSearchParams(window.location.search);
            const productId = urlParams.get('id');



            if (productId) {
                // 发送 AJAX 请求获取商品详情
                $.ajax({
                    url: `/product/getByID?id=${productId}`, // 后端 API 的 URL
                    success: function(response) {
                        if (response.code === 0) {
                            const product = response.data;

                            // 更新商品图片
                            const carouselInner = $('#product-images');
                            carouselInner.html(`
                                <div class="carousel-item active">
                                    <img class="img-fluid" src="${product.imgurl}" alt="Product Image">
                                </div>
                            `);

                            // 更新商品名称
                            $('#product-name').text(product.name);

                            // 更新商品价格
                            $('#base-price').text(`￥${product.price}`);
                            if (product.salePrice) {
                                $('#sale-price').text(`￥${product.salePrice}`);
                            } else {
                                $('#sale-price').hide(); // 如果没有折扣价，隐藏折扣价显示
                            }

                            // 更新商品描述
                            $('#product-description').text(product.info);

                            // 更新商品规格
                            const specificationTable = $('.tab-pane#nav-specification table tbody');
                            specificationTable.html(`
                                <tr>
                                    <td class="title width1"><strong>Name</strong></td>
                                    <td>${product.name}</td>
                                </tr>

                                <tr>
                                    <td class="title width1"><strong>Price</strong></td>
                                    <td>￥${product.price}</td>
                                </tr>
                                <tr>
                                    <td class="title width1"><strong>Description</strong></td>
                                    <td>${product.info}</td>
                                </tr>
                            `);

                        } else {
                            console.error('Failed to load product details:', response.msg);
                            alert('Failed to load product details. Please try again later.');
                        }
                    },
                    error: function(error) {
                        console.error('Error fetching product details:', error);
                        alert('Error fetching product details. Please check your connection.');
                    }
                });
            } else {
                console.error('Product ID not found in URL');
                alert('Invalid product ID.');
            }
        });

        const urlParams = new URLSearchParams(window.location.search);
        const productId = urlParams.get('id');

        // 为“加入购物车”按钮绑定点击事件
        $('#add-to-cart-btn').click(function() {
            if (productId) {
                // 发送 AJAX 请求到后端
                $.ajax({
                    url: 'cart/add', // 后端 API 的 URL
                    method: 'POST', // 请求方法
                    data: { productid: productId }, // 发送的商品ID
                    success: function(response) {
                        if (response.code === 0) { // 假设后端返回的 JSON 中有 code 字段，0 表示成功
                            layer.msg("添加购物车成功"); // 使用 layer.js 提示用户
                        } else {
                            layer.msg("添加购物车失败：" + response.msg); // 显示错误信息
                        }
                    },
                    error: function() {
                        layer.msg("添加购物车请求失败"); // 请求失败时的提示
                    }
                });
            } else {
                layer.msg("商品ID无效"); // 如果商品ID无效，提示用户
            }
        });




    </script>

</body>
</html>